<template>
  <div style="padding: 20px">
    <Alert message="进度条示例" type="info" show-icon>
      <template #icon><smile-outlined /></template>
      <template #description>
        <div>组件属性：</div>
        <div>percent: 百分比</div>
        <div>status: 状态，可选：success exception normal active(仅限 line)</div>
        <div>show-info: 是否显示进度数值或状态图标</div>
      </template>
    </Alert>
    <div class="demoTittle">进度条</div>
    <div class="demoTittle2 marginBtm18">标准进度条</div>
    <a-progress :percent="30" />
    <a-progress :percent="50" status="active" />
    <a-progress :percent="70" status="exception" />
    <a-progress :percent="100" />
    <a-progress :percent="50" :show-info="false" />
    <div class="demoTittle">动态进度条</div>
    <a-progress :percent="defaultPercent" />
    <a-button-group>
      <a-button @click="decline">
        <template #icon><minus-outlined /></template>
      </a-button>
      <a-button @click="increase">
        <template #icon><plus-outlined /></template>
      </a-button>
    </a-button-group>
    <div class="demoTittle">进度圈</div>
    <a-progress type="circle" :percent="50" />
  </div>
</template>
<script setup lang="ts">
  import { Alert } from 'ant-design-vue';
  import { SmileOutlined, MinusOutlined, PlusOutlined } from '@ant-design/icons-vue';
  import { ref } from 'vue';
  const defaultPercent = ref<number>(0);

  const increase = () => {
    const percent = defaultPercent.value + 10;
    defaultPercent.value = percent > 100 ? 100 : percent;
  };

  const decline = () => {
    const percent = defaultPercent.value - 10;
    defaultPercent.value = percent < 0 ? 0 : percent;
  };
</script>
<style lang="less" scoped>
  .demoTittle {
    font-size: 20px;
    font-weight: 400;
    color: #444444;
    margin: 20px 0;
  }
  .demoTittle2 {
    font-size: 14px;
    color: #494a4a;
  }
  .marginBtm18 {
    margin-bottom: 18px;
  }
  .color666666 {
    color: #666666;
  }
</style>
